<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="./注册.css">
</head>

<body>
    <script src="./注册.js"></script>
   
    <div class="box">
        <h2>注册</h2>
        <div class="input-box">
            <label>用户名</label>
            <input type="text" placeholder="请输入用户名">
            <span>用户名不能为空</span>
        </div>
        <div class="input-box">
            <label>密码</label>
            <input type="password" placeholder="请输入密码">
            <span>请输入含大小写字母的8位密码</span>
        </div>
        <div class="input-box">
            <label>确认密码</label>
            <input type="password" placeholder="请确认密码">
            <span>与原密码不同</span>
        </div>
        <div class="input-box">
            <label>邮箱</label>
            <input type="email" placeholder="请输入邮箱地址">
            <span>请输入正确邮箱格式</span>
        </div>
        <div class="input-box">
            <label>手机号</label>
            <input type="text" placeholder="请输入手机号">
            <span>请输入正确手机号格式</span>
        </div>

        <div class="btn-box">
            <a href="../登录/登录.html">已有账号</a>
            <div>
                <button onclick="zc()">注册</button>
            </div>
        </div>
    </div>

    <script>
        // 用户名
        var na = document.querySelectorAll('input')[0]
        na.addEventListener('blur', () => {
            if (event.target.value == '') {
                event.target.nextElementSibling.style.display = 'block'
            } else {
                event.target.nextElementSibling.style.display = 'none'
            }
        })

        // 密码
        var pa = document.querySelectorAll('input')[1]
        var rel = /^(?=.{8})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d).*$/
        pa.addEventListener('blur', () => {
            if (rel.test(event.target.value)) {
                event.target.nextElementSibling.style.display = 'none'
            } else {
                event.target.nextElementSibling.style.display = 'block'
            }
        })

        // 确认密码
        var pas = document.querySelectorAll('input')[2]
        var rel1 = /^(?=.{8})(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d).*$/
        pas.addEventListener('blur', () => {
            if (rel1.test(event.target.value)) {
                event.target.nextElementSibling.style.display = 'none'
            } else {
                event.target.nextElementSibling.style.display = 'block'
            }
        })

        // 邮箱
        var emm = document.querySelectorAll('input')[3]
        var rel2 = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/
        emm.addEventListener('blur', () => {
            if (rel2.test(event.target.value)) {
                event.target.nextElementSibling.style.display = 'none'
            } else {
                event.target.nextElementSibling.style.display = 'block'
            }
        })
        // 手机号
        var num = document.querySelectorAll('input')[4]
        var rel3 = /^1[3456789]\d{9}$/
        num.addEventListener('blur', () => {
            if (rel3.test(event.target.value)) {
                event.target.nextElementSibling.style.display = 'none'
            } else {
                event.target.nextElementSibling.style.display = 'block'
            }
        })
    </script>
</body>

</html>